<template>
    <div>
        <el-card class="box-card">
            <div class="header-box">
                <span class="title-name">资产名称 :</span>
                <el-input class="handle-input" clearable v-model="valueName" placeholder="请输入内容"></el-input>
            </div>
            <div class="header-box">
                <span class="title-name">请输入存放地点 :</span>
                <el-input class="handle-input" clearable v-model="valuemap" placeholder="请输入内容"></el-input>
            </div>

            <el-button type="primary" icon="el-icon-search" @click="seled">查询</el-button>
            <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
            <el-button type="success" icon="el-icon-upload2" @click="exportlist">导出</el-button>
        </el-card>
        <div class="container">
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column type="index" label="序号" width="60" align='center'>
                    <template slot-scope="scope">
                        {{ scope.$index + (query.pageNum - 1) * query.pageSize + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="equipSerial" label="标签号" align='center' width="160">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" width="190" trigger="hover" :content="scope.row.equipSerial">
                            <el-button slot="reference" class="hoverbut">{{
                                scope.row.equipSerial.length
                                    >= 15 ?
                                    scope.row.equipSerial.slice(0,
                                        15) + "···" :
                                    scope.row.equipSerial }}</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="assetsSerial" label="资产编码" align='center'></el-table-column>
                <el-table-column prop="equipName" label="资产名称" align='center'></el-table-column>
                <el-table-column prop="standard" label="规格型号" align='center'></el-table-column>
                <el-table-column prop="equCategory" label="资产分类" align='center'></el-table-column>
                <el-table-column prop="equParentCategory" label="资产大类" align='center'></el-table-column>
                <el-table-column prop="equipPrice" label="资产价格" align='center'></el-table-column>
                <el-table-column prop="equipNum" label="资产数量" align='center'>
                    <template slot-scope="scope">
                        <span>1</span>
                    </template>
                </el-table-column>
                <el-table-column label="业务状态" align='center'>
                    <template slot-scope="scope">
                        <span v-if="scope.row.equipState == 1"
                            style="background-color: rgba(0, 102, 255, 0.2); color:rgb(0, 102, 255) ;  display: inline-block; padding: 3px 10px;">闲置中</span>
                        <span v-else-if="scope.row.equipState == 2"
                            style="background-color: rgba(212, 174, 5, 0.2); color:rgb(212, 174, 5) ;   display: inline-block; padding: 3px 10px;">报修中</span>
                        <span v-else-if="scope.row.equipState == 3"
                            style="background-color: rgba(212, 71, 5, 0.1); color: rgb(212, 71, 5);  display: inline-block; padding: 3px 10px;">已报废</span>
                        <span v-else-if="scope.row.equipState == 4"
                            style="background-color: rgba(5, 212, 57, 0.1);  color: rgb(5, 212, 57); display: inline-block; padding: 3px 10px;">使用中</span>
                    </template>
                </el-table-column>
                <el-table-column prop="useDept" label="使用部门" align='center'></el-table-column>
                <el-table-column prop="personCharge" label="使用人" align='center'></el-table-column>
                <el-table-column prop="storagePlace" label="存放地点" align='center'></el-table-column>
                <el-table-column prop="gainType" label="取得方式" align='center'></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-link type="primary" class="mr10" @click="detail(scope.row.equipSerial)">详情</el-link>
                        <el-link type="primary" class="mr10"
                            @click="edit(scope.row.equipSerial, scope.row.id)">编辑</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                    :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
        <listdetail :disable="disable" ref="listdetail" @close="disable = false"></listdetail>
        <listeditpage ref="listedit" :editdisable="editdisable" @close="editclose"></listeditpage>
    </div>
</template>

<script>
import { propertylistByPage, propertylistexport } from '../../../api/index'
import listdetail from './components/assetlist_detail'
import listeditpage from './components/assetlist_edit.vue'
export default {

    data() {
        return {
            editdisable: false,
            disable: false,
            valueName: "", //名称
            valuemap: "", ///位置
            query: {
                storagePlace: '',
                equipName: '',
                pageNum: 1,
                pageSize: 10,
            },
            pageTotal: 0,
            tableData: [],
        };
    },
    components: {
        listdetail,
        listeditpage
    },
    mounted() {
        this.assetlist()
    },
    methods: {
        handlePageChange(val) {
            this.query.pageNum = val;
            this.assetlist()

        },
        //详情
        detail(e) {
            this.disable = true
            this.$refs.listdetail.open(e)
        },
        //编辑
        edit(e, id) {
            this.editdisable = true
            this.$refs.listedit.open(e, id)
        },
        // 导出
        async exportlist() {
            const data = {
                equipName: this.query.equipName,
                storagePlace: this.query.storagePlace
            }
            const aa = await propertylistexport(data)
            // console.log(aa);
            this.$saveAs(aa.data, '资产清单.xlsx')
        },
        // 重置
        reset() {
            this.valueName = ''
            this.valuemap = ''
            this.query.equipName = ''
            this.query.storagePlace = ''
            this.query.pageNum = 1
            this.assetlist()
        },
        //查询
        seled() {
            this.query.equipName = this.valueName
            this.query.storagePlace = this.valuemap
            this.query.pageNum = 1
            this.assetlist()
        },
        editclose() {
            this.editdisable = false
            this.assetlist()
        },
        //发送请求
        async assetlist() {
            const data = await propertylistByPage(this.query)
            if (data.data.data.records.length == 0 && data.data.data.total > 0) {
                this.query.pageNum--
                this.assetlist()
                return
            }
            this.pageTotal = data.data.data.total
            this.tableData = data.data.data.records
        }
    }
};
</script>

<style scoped>
.header-box {
    /* background-color: rgb(5, 212, 57); */
    display: inline-block;
}

.title-name {
    font-size: 14px;
    margin-right: 10px;
}

.handle-input {
    width: 220px;
    margin-right: 10px;
}

.handle-select {
    width: 220px;
    margin-right: 10px;
}

.hoverbut {
    width: 100%;
    background-color: transparent !important;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏溢出的部分 */
    text-overflow: ellipsis;
    /* 使用省略号 */
    border: 0;
    color: #000 !important;
}

.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}
</style>
